<template>
    <div class="content">
        <div class="region">
            <div class="left">地区:</div>
            <ul>
                <li :class="activeFlag === '' ? 'active' : '' " @click="changeRegion('')">全部</li>
                <li v-for="region in regionArr" :key="region.value" :class="activeFlag === region.value ? 'active' : '' " @click="changeRegion(region.value)">{{region.name}}</li>
            </ul>
        </div>
    </div>
</template>

<script setup lang="ts">
import {onMounted,ref} from "vue";
import {dict} from '@/api/dict/index'
import type {DictDataResponse,Data} from '@/api/dict/type'

let regionArr = ref<Data>([])
let activeFlag = ref<string>('')

!onMounted(()=>{
  getRegionData()
})

const getRegionData = async ()=>{
  let result:DictDataResponse = await dict.findByDictCode('Beijin')
  if (result.code === 200){
    regionArr.value = result.data
  }
}
let $emit = defineEmits(['getRegion'])
const changeRegion = (region:string)=>{
  activeFlag.value = region
  $emit('getRegion',region)
}
</script>

<style scoped lang="scss">
.content{
  color: #7f7f7f;
  .region{
    display: flex;
    .left{
      width: 3%;
      font-weight: 900;
      /*上 右 下 左*/
      margin: 10px 10px 10px 0;
    }
    ul{
      width: 95%;
      display: flex;
      flex-wrap: wrap;
      li{
        margin: 10px 10px 10px 0;
        &.active{
          color: #3a8ee6;
        }
      }
      li:hover{
        color: #3a8ee6;
        cursor: pointer;
      }
    }
  }
}
</style>